<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content=""/>
    <!--// Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />


</head>
<body>
<!--导航栏-->
<!-- sticky navigation -->
<div class="nav-links">
    <nav class='navbar navbar-default'>
        <div class='container'>
            <div class='collapse navbar-collapse'>
                <ul>
                    <li>
                        <a href="index.html">主页</a>
                    </li>
                    <li>
                        <a href="about.html">宠物知识</a>
                    </li>
                    <li>
                        <a href="services.html">领养中心</a>
                    </li>
                    <li>
                        <a href="blog.html">团队博客</a>
                    </li>
                    <li>
                        <a href="team.html">团队展示</a>
                    </li>

                    <li>
                        <button class="btn-primary btn-lg" data-toggle="modal" data-target="#login">注册/登录</button>
                    </li>
                    <li>
                        <button class="btn-primary btn-lg" data-toggle="modal" data-target="#editUsers">修改</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<!-- blog -->
<div class="blog" id="blog">
    <div class="container">
        <h3 class="agile-title">Our Blog</h3>

        <div class="col-md-5 col-xs-6 blog-grids">
            <div class="blog-full-wthree">
                <div class="blog-left-agileits">
                    <p>Jan</p>
                    <span>18</span>
                </div>
                <div class="blog-right-agileits-w3layouts">
                    <h4>
                        <a href="#" data-toggle="modal" data-target="#myModal2">eoquie int temporant 2018</a>
                    </h4>
                    <p>
                        <a href="#" data-toggle="modal" data-target="#myModal2">Cat Life</a>
                    </p>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="blog-full-wthree">
                <div class="blog-left-agileits">
                    <p>Feb</p>
                    <span>22</span>
                </div>
                <div class="blog-right-agileits-w3layouts">
                    <h4>
                        <a href="#" data-toggle="modal" data-target="#myModal2">eoquie int temporant 2018</a>
                    </h4>
                    <p>
                        <a href="#" data-toggle="modal" data-target="#myModal2">Cat Life</a>
                    </p>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="blog-full-wthree">
                <div class="blog-left-agileits">
                    <p>Feb</p>
                    <span>15</span>
                </div>
                <div class="blog-right-agileits-w3layouts">
                    <h4>
                        <a href="#" data-toggle="modal" data-target="#myModal2">eoquie int temporant 2018</a>
                    </h4>
                    <p>
                        <a href="#" data-toggle="modal" data-target="#myModal2">Cat Life</a>
                    </p>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>


        <div class="col-md-5 col-xs-6 blog-grids">
            <div class="blog-full-wthree">
                <div class="blog-left-agileits">
                    <p>Jan</p>
                    <span>26</span>
                </div>
                <div class="blog-right-agileits-w3layouts">
                    <h4>
                        <a href="#" data-toggle="modal" data-target="#myModal2">eoquie int temporant 2018</a>
                    </h4>
                    <p>
                        <a href="#" data-toggle="modal" data-target="#myModal2">Cat Life</a>
                    </p>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="blog-full-wthree">
                <div class="blog-left-agileits">
                    <p>Feb</p>
                    <span>06</span>
                </div>
                <div class="blog-right-agileits-w3layouts">
                    <h4>
                        <a href="#" data-toggle="modal" data-target="#myModal2">eoquie int temporant 2018</a>
                    </h4>
                    <p>
                        <a href="#" data-toggle="modal" data-target="#myModal2">Cat Life</a>
                    </p>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="blog-full-wthree">
                <div class="blog-left-agileits">
                    <p>Feb</p>
                    <span>12</span>
                </div>
                <div class="blog-right-agileits-w3layouts">
                    <h4>
                        <a href="#" data-toggle="modal" data-target="#myModal2">eoquie int temporant 2018</a>
                    </h4>
                    <p>
                        <a href="#" data-toggle="modal" data-target="#myModal2">Cat Life</a>
                    </p>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>


    </div>
    <div class="blog-grids mid-blog-agile">
        <img src="../images/cat2.png" class="img-responsive" alt="">
    </div>
<!-- Modal5 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="modal-info">
                    <h4>Cat Life</h4>
                    <img src="../images/g2.jpg" alt=" " class="img-responsive" />
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h5>
                    <p class="para-agileits-w3layouts">Duis sit amet nisi quis leo fermentum vestibulum vitae eget augue. Nulla quam nunc, vulputate id urna at, tempor tincidunt
                        metus. Sed feugiat quam nec mauris mattis malesuada.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //Modal5 -->
<!-- //blog -->
<!-- js -->
<script src="../JQuery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->
</body>
